<template>
  <!-- 环网柜 配置 -->
  <a-form
    :model="form"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    layout="vertical"
    ref="formRef"
    :rules="rules"
    :disabled="!configData.isEdit"
  >
    <a-form-item label="环网柜名称" name="name">
      <a-input v-model:value="form.name" class="formInput" />
    </a-form-item>
    <a-form-item label="环网柜资产编码" name="assetCode">
      <a-input v-model:value="form.assetCode" class="formInput" />
    </a-form-item>
    <a-form-item label="是否存在断路器" name="isBreaker">
      <a-select
        class="formSelect"
        v-model:value="form.isBreaker"
        @change="changeIsBreaker"
      >
        <a-select-option :value="1">是</a-select-option>
        <a-select-option :value="0">否</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item v-if="form.isBreaker" label="断路器名称" name="breakerName">
      <a-input v-model:value="form.breakerName" class="formInput" />
    </a-form-item>
    <a-form-item
      v-if="form.isBreaker"
      label="断路器资产编码"
      name="breakerAssetCode"
    >
      <a-input
        v-model:value="form.breakerAssetCode"
        class="formInput"
      />
    </a-form-item>
    <!-- <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit">保存</a-button>
    </a-form-item> -->
  </a-form>
  <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
    <a-button v-if="!configData?.isEdit" type="primary" @click="handleEdit"
      >编辑</a-button
    >
    <a-button
      v-else
      type="primary"
      @click="onSubmit"
      :loading="stionConfigState.configDataSaveLoading"
      >保存</a-button
    >
  </a-form-item>
</template>
<script setup>

import { EQUIP_TYPE } from "@/constants/stationConfig";
const emits = defineEmits(["getConfig"]);
import { useStionConfigStore } from "@/stores/stationConfig";
const { stionConfigState, changeConfigData } = useStionConfigStore();
const configData = computed(() => stionConfigState.configData);
import { cloneDeep } from "lodash-es";
watch(
  () => stionConfigState.configData,
  (val) => {
    form.value = cloneDeep(stionConfigState.configData);
  },
  { deep: true }
);
const $api = inject("$api");
const form = ref({
  name: "",
  assetCode: "",
  isBreaker: 0,
  breakerName: "",
  breakerAssetCode: "",
  type: EQUIP_TYPE.HUAN_WANG_GUI,
});
const formRef = ref();
const rules = {
  name: [{ required: true, message: "请输入", trigger: "change" }],
  assetCode: [{ required: true, message: "请输入", trigger: "change" }],
  isBreaker: [{ required: true, message: "请选择", trigger: "change" }],
  breakerName: [{ required: true, message: "请输入", trigger: "change" }],
  breakerAssetCode: [{ required: true, message: "请输入", trigger: "change" }],
};
const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      form.value.type = EQUIP_TYPE.HUAN_WANG_GUI;
      emits("getConfig", toRaw(form));
    })
    .catch((error) => {
      console.log("error", error);
    });
};
const changeIsBreaker = async (val) => {
  if (val) {
    const res = await $api.assertCode({
      type: EQUIP_TYPE.DUAN_LU_QI,
    });
    form.value.breakerAssetCode = res.data;
  }
};
const labelCol = { style: { width: "150px" } };
const wrapperCol = { span: 14 };
const handleEdit = () => {
  changeConfigData({
    ...stionConfigState.configData,
    isEdit: true,
  })
}
</script>
<style lang="less" scoped>
.formInput {
  width: 175px;
}
.formSelect {
  width: 175px;
  text-align: left;
}
</style>